<template>
<div class="editPassword">
  <mu-form ref="form" :model="validateForm" class="mu-demo-form">
    <mu-form-item prop="oldpassword" :rules="oldpasswordRules">
      <mu-text-field type="password" placeholder="请输入原密码" solo class="input" v-model="validateForm.oldpassword" prop="oldPass">
        <img src="@as/img/wode_lock.png" alt="">
      </mu-text-field>
    </mu-form-item>
    <mu-form-item prop="password" :rules="passwordRules">
      <mu-text-field type="password" placeholder="请输入新密码" solo class="input" v-model="validateForm.password" prop="newPass">
        <img src="@as/img/wode_lock.png" alt="">
      </mu-text-field>
    </mu-form-item>
    <mu-form-item prop="passwordCheck" :rules="passwordCheckRules">
      <mu-text-field type="password" placeholder="请确认新密码" solo class="input" v-model="validateForm.passwordCheck" prop="password">
        <img src="@as/img/wode_lock.png" alt="">
      </mu-text-field>
    </mu-form-item>
  </mu-form>
  <div class="btn" @click="submit">确认修改</div>
</div>
</template>

<script>
export default {
  data () {
    return {
      validateForm:{
        oldpassword: '',
        password: '',
        passwordCheck: '',
      },
      oldpasswordRules:[
        { validate: (val) => !!val, message: '请输入原密码'},
        { validate: (val) => val.length >= 6 && val.length <= 20, message: '密码长度为6-20位'}
      ],
      passwordRules:[
        { validate: (val) => !!val, message: '请输入新密码'},
        { validate: (val) => val.length >= 6 && val.length <= 20, message: '密码长度为6-20位'},
        { validate: (val,form) => val == form.passwordCheck, message: '两次输入的新密码不一致'}
      ],
      passwordCheckRules:[
        { validate: (val) => !!val, message: '请确认新密码'},
        { validate: (val) => val.length >= 6 && val.length <= 20, message: '密码长度为6-20位'},
        { validate: (val,form) => val == form.password, message: '两次输入的新密码不一致'}
      ],
    }
  },
  mounted(){
    this.$progress.done()
  },
  methods: {
    submit(){
      this.$refs.form.validate().then((result) => {
        if(result){
          let params = {
            uid: JSON.parse(Cookies.get('user_71ydj')).id,
            oldpassword: this.validateForm.oldpassword,
            password: this.validateForm.password
          }
          const url = `app/login/editpassword`
          this.$http.post(url, params).then(res => {
            if(res.code === 200) {
              this.$toast.success(res.msg);
              window.sessionStorage.removeItem("user")
              this.$router.push('/login')
            } else {
              this.$toast.error(res.msg);
            }
          })
        }
      });
    },
  },
}
</script>
<style>
.editPassword input{
  height:40px;
  line-height: 24px;
}
.editPassword input::-webkit-input-placeholder{
  font-size:14px;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(153,153,153,1);
}
.mu-form-item-help{
  top: 50px;
  padding-left: 20px;
}
</style>
<style lang="scss" scoped>
.editPassword{
  padding-top: 24px
}
.input{
  position: relative;
  display: block;
  width:343px;
  height:40px;
  background:rgba(255,255,255,1);
  border:1px solid rgba(221,221,221,1);
  border-radius:4px;
  margin: 0 auto;
  margin-bottom: 15px;
  outline:0;
  padding: 0 35px;
  img{
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width:11px;
    height:13px;
  }
}


.btn{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 23px;
  width:343px;
  height:44px;
  line-height: 44px;
  text-align: center;
  background:rgba(235,77,68,1);
  border-radius:4px;
  font-size:16px;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(255,255,255,1);
}
</style>

